<template>
  <div>
    <Navbar></Navbar>
    <el-row>
      <el-col :span="12">
        <el-button size="small" style="width: 100px;margin-right: 10px" class="filter-item" @click="">零件</el-button>
        <el-button size="small" style="width: 100px" class="filter-item" @click="">装配树</el-button>
        <el-button size="small" style="width: 100px" class="filter-item" @click="">大图显示</el-button>
      </el-col>
      <el-col :span="12">
          <el-select  placeholder="零件" size="small" style="width: 200px" class="filter-item" clearable @change="">

          </el-select>
          <el-input
            size="small"
            clearable
            placeholder=""
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="doQuery"
          />
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click=""
          >搜索</el-button>
        <div style="display:inline;margin-left:30px"> 过滤器：</div>
          <el-button size="medium " style="width: 100px;" class="filter-item" @click="">开启</el-button>
          <el-button size="medium " style="width: 100px;" class="filter-item" @click="">关闭</el-button>
      </el-col>
    </el-row>
    <div class="img-bottom">

      <div style="" class="change" id="one" >
        <el-button size="medium " style="margin-left: calc(100% - 150px)" class="filter-item" @click="changeClick">水平切换</el-button>
      </div>

      <div class="img-detail-warpper" id="two">
        <div class="img-header">
          <div style="width: 900px;display: flex;">
            <div v-for="(item,index) in imgList" :key="index"  @click="fuctionClick(index)" class="small-fuction">
              <el-button >
                <img :src="item.path" alt="" class="fuction">

              </el-button>

            </div>
          </div>
          <div class="back">
            <el-button >
              <img src="./lj.png" alt="" class="fuction">
            </el-button>
          </div>
        </div>
        <div class="img-box" :class="outIn" @click.prevent="outOrIn">

          <div class="box-warpper" id="boxWarpper">
            <div v-for="(item,index) in texts" :key="index" class="text-position" :style="[{'left':(item.left+'px')},{'top':(item.top+'px')},{color:item.color}]">
              {{item.content}}
            </div>

            <canvas id="divTest"
              :width="width" :height="height"
            @mousedown="down($event)"
            @mousemove="move($event)"
            @mouseup="up"
            ></canvas>
          </div>

        </div>
      </div>

      <div class="img-left" id="three">

        <el-table
          :data="tableData"
          style="width: 100%"
          stripe="true"
          :row-class-name=""  @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="date"
            label="日期"
            width="180" align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180" align="center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址" align="center">
          </el-table-column>
        </el-table>
      </div>


    </div>
<div class="textOne">
  测试颜色
</div>
  </div>
</template>

<script>
  import sz from '@/views/photo/sz.png'
  import lj from '@/views/photo/lj.png'
  import home from '@/views/photo/home.png'
  import fd from '@/views/photo/fd.png'
  import sx from '@/views/photo/sx.png'
  import ca from '@/views/photo/ca.png'
  import bi from '@/views/photo/bi.png'
  import Navbar from "@/layout/components/Navbar"
export default {
  name:"imgDetail",
  components:{
    Navbar
  },
  data(){
    return{
      imgList:[
        {
          path:home
        },{
          path:sz
        },{
          path:fd
        },{
          path:sx
        },{
          path:bi
        },{
          path:ca
        },{
          path:lj
        },{
          path:lj
        }],
        curr:-1,
        outIn:"",
        size:50,
        canvas: {},
        cxt: {},
        width: 834,
        height: 600,
        widthBL:1,
        heightBL:1,
        startPoint: {
          x: 0,
          y: 0,
        },
        endPoint: {
          x: 0,
          y: 0,
        },
        paint: false, // 是否开启画笔
        eraser: false, // 是否开启橡皮擦
        history: [], // 操作历史记录
        color: "#ff0000",
        value: 3,
        x:1,
        y:1,
        oldTexts:[],
        texts:[{
          color:"red",
          content:"B456789",
          top:50,
          left:100
        },{
          color:"yellow",
          content:"B567",
          top:90,
          left:160
        },{
          color:"blue",
          content:"A123",
          top:20,
          left:120
        }],
        tableData: [{
                  date: '2016-05-02',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1518 弄',
                  color:'blue'
                }, {
                  date: '2016-05-04',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1518 弄',
                  color:'red'
                }, {
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1518 弄',
                  color:'red'
                }, {
                  date: '2016-05-03',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1518 弄',
                  color:'blue'
                }],
        imgsrc:`https://ts4.cn.mm.bing.net/th?id=OIP-C.lqiTXCbGG3c6Vt37kFis5AHaFr&w=285&h=218&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2`
    }
  },
  mounted() {
    this.writer();
    this.oldTexts = JSON.parse(JSON.stringify(this.texts));//深拷贝
  },
  methods: {
    //绘制图片
    writer(){
      let canvas = document.getElementById("divTest");
      let cxt = canvas.getContext('2d' , { alpha: true , desynchronized: false , colorSpace: 'srgb', willReadFrequently: true });
      this.cxt = cxt;
      var img = new Image();   // 创建img元素

      img.crossOrigin = ''
			img.onload = function(){
			  cxt.drawImage(img, 0, 0,834,600)
			}
			img.src = this.imgsrc; // 设置图片源地址
      setTimeout(()=>{
        this.history.push(this.cxt.getImageData(0, 0, this.width, this.height));
        // this.texts.forEach(e=>{
        //   cxt.font = "15px sans-serif"
        //   cxt.fillStyle = e.color;
        //   cxt.fillText(e.content, e.left, e.top);
        // })

        // cxt.fillStyle = "#0055ff"
        // cxt.fillText("天若有情", 100, 200)
      },100)


    },
    outOrIn(){//放大缩小
      let divTest = document.getElementById('divTest');
      let boxWarpper = document.getElementById('boxWarpper')
      let cxt = divTest.getContext("2d").canvas;
      let x = divTest.offsetLeft;
      let y = divTest.offsetTop;
      let width = cxt.clientWidth;
      let height = cxt.clientHeight;
      let size = this.size;
      let wbl = size/width;
      let hbl = size/height;
      let newTextList = []
      if(this.outIn == "zoom-in"){
        // const old = this.cxt.getImageData(0, 0, divTest.width, divTest.height);
        divTest.style.width = width + size+"px";
        divTest.style.height = height + size+"px";
        // divTest.width = width + size;
        // divTest.height = height + size;

        divTest.style.left = x - (size/2) + 'px';
        divTest.style.top = y- (size/2) + 'px';

        // boxWarpper.style.left = x - (size/2) + 'px';
        // boxWarpper.style.top = y- (size/2) + 'px';

        // this.cxt.putImageData(old,0,0);

        this.texts.forEach(e=>{
          e.left = e.left + e.left*wbl;
          e.top = e.top + e.top*hbl;
          newTextList.push(e)
        })
        console.log(newTextList)
        this.texts = newTextList

      }
      if(this.outIn == "zoom-out"){
        // const olds = this.cxt.getImageData(0, 0, divTest.width, divTest.height);
        divTest.style.width = width - size +"px";
        divTest.style.height = height - size +"px";
        // divTest.width = width - size;
        // divTest.height = height - size;
        divTest.style.left = x + (size/2) + 'px';
        divTest.style.top = y+ (size/2) + 'px';
        // this.cxt.putImageData(olds,0,0);
        this.texts.forEach(e=>{
          e.left = e.left - e.left*wbl;
          e.top = e.top - e.top*hbl;
          newTextList.push(e)
        })
        console.log(newTextList)
        this.texts = newTextList
      }
    },
    down(e) {
      // if(this.curr==-1){
      //   console.log(e.offsetX,e.offsetY)
      //   let opotion = -1;
      //   this.texts.forEach((item,index)=>{
      //     if(item.left<=e.offsetX&&e.offsetX<=(item.left+60)&&(item.top-10)<=e.offsetY&&e.offsetY<=item.top){
      //       opotion = index;
      //     }
      //   })
      //   console.log(opotion,"盒子")
      // }

      if(this.curr==1){
        e.preventDefault();//阻止冒泡
        // 获取元素
        // let divTest = document.getElementById('divTest');
        let divTest = document.getElementById('boxWarpper');
        //鼠标xy移动的距离
        var x = e.clientX - divTest.offsetLeft;
        var y = e.clientY - divTest.offsetTop;
        // 添加鼠标移动事件
        document.onmousemove = (e) => {
          //图片移动
          divTest.style.left = e.clientX - x + 'px';
          divTest.style.top = e.clientY - y + 'px';
        };
        // 添加鼠标抬起事件，鼠标抬起，将事件移除
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      }
      if(this.curr == 4){//画笔

      //现在的像素/之前的像素  放大缩小的比例
      // 现在的像素X比例 得到现在应该的像素
      let oldwidth = this.cxt.canvas.clientWidth;;
      let oldheight = this.cxt.canvas.clientHeight;

      this.widthBL = this.width/oldwidth;
      this.heightBL = this.height/oldheight;
      // 鼠标按下事件
      const x = parseInt(e.offsetX*this.widthBL);
      const y = parseInt(e.offsetY*this.heightBL);
      console.log(e.offsetX,this.widthBL,x)
      // const x = parseInt(e.offsetX);
      // const y = parseInt(e.offsetY);

      this.startPoint = {
        x: x,
        y: y,
      };
        this.paint = true;
      }


    },
    fuctionClick(index){
      if(index==0){//回原点
        let divTest = document.getElementById('divTest');
        divTest.style.left = 70 + 'px';
        divTest.style.top = 30 + 'px';
        divTest.style.width = 834 + "px";
        divTest.style.height = 600 + "px";
        console.log(this.oldTexts,"999")
        this.texts = this.oldTexts;
        this.curr = -1;
        this.outIn = "";
      }else if(index==1){//拖动
        this.outIn = "pointer";
        this.curr = index;
      }else if(index==2){//放大
        this.outIn = "zoom-in";
        this.curr = -1;
      }else if(index==3){//缩小
        this.outIn = "zoom-out";
        this.curr = -1;
      }else if(index==4){//画笔
        this.outIn = "";
        this.curr = index;
      }else if(index==5){//撤回上一步操作
        if(this.history.length>1){
          this.history.pop();
          this.cxt.putImageData(this.history[this.history.length-1],0,0);
        }
        this.outIn = "xpc";
        this.curr = -1;
      }else if(index==6){//点击
        this.outIn = "";
        this.curr = -1;
      }else if(index==7){//转发
        this.outIn = "";
        this.curr = -1;
      }

    },
    move(e) {

      if (this.paint) {
       //鼠标移动事件
       e.preventDefault();
       const x = parseInt(e.offsetX*this.widthBL);
       const y = parseInt(e.offsetY*this.heightBL);

       this.endPoint = {
         x: x,
         y: y,
       };

       if (this.paint) {
         if (this.eraser) {
           this.cxt.clearRect(x, y, 10, 10);
         } else {
           this.draw();
         }
       }
       this.startPoint.x = this.endPoint.x;
       this.startPoint.y = this.endPoint.y;
      }

    },
    up() {
      if(this.curr == 4){
      let width = this.cxt.canvas.clientWidth;
      let height = this.cxt.canvas.clientHeight;
      //鼠标松开事件
      let image = this.cxt.getImageData(0, 0, width, height);
      this.history.push(image);
      this.paint = false;
      }
    },
    draw() {
      // 开始绘制
      this.cxt.beginPath();
      // 设置线条样式
      this.cxt.lineWidth = this.value;
      this.cxt.lineCap = "round";
      this.cxt.lineJoin = "round";
      this.cxt.strokeStyle = this.color;
      //起始位置
      this.cxt.moveTo(this.startPoint.x, this.startPoint.y);
      //停止位置
      this.cxt.lineTo(this.endPoint.x, this.endPoint.y);
      //描绘线路
      this.cxt.stroke();
      //结束绘制
      this.cxt.closePath();

    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //水平垂直切换
    changeClick(){
      let one = document.getElementById("one");
      let two = document.getElementById("two");
      let three = document.getElementById("three");
      if(one.style.float == "none"){
        one.style.width = "calc(100% - 1000px)";
        one.style.float = "left";
        two.style.width = "1000px";
        two.style.float = "left";
        three.style.width = "calc(100% - 1000px)";
        three.style.position = "absolute";
      }else{
        one.style.width = "100%";
        one.style.float = "none";
        two.style.width = "100%";
        two.style.float = "none";
        three.style.width = "100%";
        three.style.position = "static";
      }

    }

  },
}
</script>

<style lang="scss">
  .textOne{
    color : $activeColor;
  }
  .img-bottom{
    margin-top: 20px;
    /* display: flex; */
    width: 100%;
    position: relative;
    /* display: flex;
    flex-wrap: wrap; */
  }
  .img-left{
    /* width: calc(100% - 1000px); */
    /* flex:1; */
    width: calc(100% - 1000px);

    position: absolute;
    top: 200px;
    left: 0;
  }
  .change{
    height: 200px ;
    background-color: antiquewhite;

    width: calc(100% - 1000px);
    float: left;
  }
  .img-detail-warpper{
    background-color: aliceblue;
    width: 1000px;
    /* width: 100%; */
    height: 800px;
    /* float: right; */

    float: left;

  }
  .img-header{
    width: 100%;
    display: flex;
  }
  .back{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .small-fuction{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .fuction{
    width: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .zoom-in{
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }
  .zoom-out{
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
  }
  .pointer{
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  .pen{
    cursor:url("./shu.ico"),auto;
  }
  .xpc{
    cursor:url("./xpc.ico"),auto;
  }
  .img-box{
    width:100%;
    height: 700px;
    overflow: hidden;
    position:relative;
  }
  .box-warpper{
    width: 834px;
    height: 600px;
    position:relative;
    left: calc((100% - 834px)/2);
    top: calc((100% - 600px)/2);
  }
  #divTest{
    background-color: yellow;

    width: 834px;
    height: 600px;
    /* position: absolute;
    left: 60px;
    top: 30px; */
  }
  .text-position{
    position: absolute;
   /* z-index: 99; */
    user-select: none;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>
